<template>
    <div class="teachersImprove">
        <Header></Header>
        <Banner :bannerList="bannerList"></Banner>
        <div class="improve-content">
            <div class="hezuonr">
                <div class="ts-title">
                    <p>兼职教师合作内容</p>
                    <span></span>
                </div>
                <div class="jianzhi">
                    <div class="jzitem" v-for="(item,index) in jzList" :key="index">
                        <img :src="item.src" alt="">
                        <p>{{ item.title }}</p>
                        <span>{{ item.desc }}</span>
                    </div>
                </div>
            </div>
            <div class="jiaruform">
                <div class="ts-title">
                    <p>期待您的加入</p>
                    <span></span>
                </div>
                <h3>我要报名</h3>
                <div class="form-box">
                     <div class="form-item">
                        <label for="">姓名</label>
                        <input type="text" v-model="formData.name" placeholder="请输入您的姓名">
                    </div>
                    <div class="form-item">
                        <label for="">性别</label>
                        <select name="" id="" v-model="formData.sex">
                            <option value="">请选择</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                    <div class="form-item">
                        <label for="">电话</label>
                        <input v-model="formData.mobile" type="text" placeholder="请输入您的电话">
                    </div>
                    <div class="form-item">
                        <label for="">微信名</label>
                        <input v-model="formData.wx_name" type="text" placeholder="请输入您的微信名">
                    </div>
                    <div class="form-item">
                        <label for="">预教科目</label>
                        <input v-model="formData.subject" type="text" placeholder="请输入您想要教的科目（可填多个）">
                    </div>
                    <div class="form-item">
                        <label for="">备注</label>
                        <input v-model="formData.remark" type="text" placeholder="其他补充说明">
                    </div>
                </div>
                <a-button type="primary" @click="() => submit()" class="form-button">提交</a-button>
            </div>
            <div class="lianxi">
                <div class="ts-title1">
                    <p>合作联系方式</p>
                    <span></span>
                    <b>以专业铸就品质，以合作赢得未来！</b>
                </div>
                <div class="lianxi-box">
                    <div class="lianxi-item">
                        <img src="../../assets/icons/hezuo01.png" alt="">
                        <p>联系人</p>
                        <span>{{ contactInfo.contact_name }}</span>
                    </div>
                    <div class="lianxi-item">
                        <img src="../../assets/icons/hezuo02.png" alt="">
                        <p>联系方式</p>
                        <span>{{ contactInfo.contact_mobile }}</span>
                    </div>
                    <div class="lianxi-item">
                        <img src="../../assets/icons/hezuo03.png" alt="">
                        <p>微信</p>
                        <span>{{ contactInfo.contact_wx }}</span>
                    </div>
                </div>
            </div>
        </div>
        <Footer></Footer>
        <Services></Services>
    </div>
</template>
<script>
import Header from "../../components/Header.vue";
import Banner from "../../components/Banner.vue";
import Footer from "../../components/Footer.vue";
import Services from "../../components/Services.vue";
export default {
    name: "TeachersImprove",
    components: { Header, Banner, Footer, Services},
     data() {
        return {
            jzList: [
                {
                    src: require("../../assets/icons/tisheng01.png"),
                    title: "教材编写",
                    desc: "地方性信息技术课程教材 合作开发编写"
                },
                {
                    src: require("../../assets/icons/tisheng02.png"),
                    title: "师资培训",
                    desc: "地方性信息技术教师培训、 人才实训"
                },
                {
                    src: require("../../assets/icons/tisheng03.png"),
                    title: "校本课程",
                    desc: "试点校中小学编程教育校本 课程建设"
                },
                {
                    src: require("../../assets/icons/tisheng04.png"),
                    title: "AI双师服务",
                    desc: "AI双师编程教学服务"
                }
            ],
            bannerList: [
                {
                    url: require("@/assets/banner2.png")
                },
                {
                    url: require("@/assets/banner3.png")
                }
            ],
            formData: {
                name: '',
                sex: '',
                mobile: '',
                wx_name: '',
                subject: '',
                remark: ''
            },
            contactInfo: {}
        }
    },
    mounted() {
        this.getContactInfo();
    },
    methods: {
        async getContactInfo() {
            const res = await this.$request.get('api/index/hz_contact');
            console.log(res, 'res===');
            if (res.code == 1) {
                this.contactInfo = res.data || {};
            }
        },
        submit() {
            if (!this.formData.name) {
                this.$message.error('请填写姓名');
            }
            if (!this.formData.mobile) {
                this.$message.error('请填写手机号');
            }
            console.log(this.formData, 'this.formData');
            this.$request.post('api/index/teacher_join', this.formData).then(res => {
                if (res.code == 1) {
                    this.$message.success('报名成功！')
                } else {
                    this.$message.error(res.msg)
                }
            })
        }
    },
}
</script>
<style lang="less" scoped>
.improve-content{
    .ts-title{
        margin-bottom: 50px;
        p{
            font-weight: 500;
            font-size: 32px;
            color: #1D2129;
        }
        span{
            display: block;
            width: 70px;
            height: 6px;
            background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
            border-radius: 7px;
            margin: 0 auto;
        }
    }
    .hezuonr{
        max-width: 1200px;
        margin: 70px auto 100px auto;
        .jianzhi{
            display: flex;
            justify-content: space-between;
            .jzitem{
                img{
                    width: 84px;
                    height: 84px;
                    margin-bottom: 36px;
                }
                p{
                    font-weight: 500;
                    font-size: 20px;
                    color: #000000;
                }
                span{
                    font-weight: 400;
                    font-size: 14px;
                    color: #787878;
                }
            }
        }
    }
    .jiaruform{
        max-width: 1200px;
        margin: 70px auto 100px auto;
        h3{
            text-align: left;
            font-weight: 500;
            font-size: 32px;
            color: #1D2129;
            margin-left: 155px;
        }
        .form-box{
            // margin-top: 46px;
            margin: 45px auto;
            width: 920px;
            .form-item{
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                label {
                    font-weight: 500;
                    font-size: 16px;
                    color: #1D2129;
                    line-height: 24px;
                    display: block;
                    width: 80px;
                    margin-right: 20px;
                    text-align: left;
                }
                input{
                    width: 836px;
                    height: 56px;
                    background: #FBFBFB;
                    border-radius: 8px;
                    border: 1px solid #D6D6D6;
                    padding-left: 10px;
                }
                select{
                    width: 836px;
                    height: 56px;
                    background: #FBFBFB;
                    border-radius: 8px;
                    border: 1px solid #D6D6D6;
                    padding: 0 10px;
                }
            }
        }
        .form-button{
            width: 170px;
            height: 56px;
            line-height: 56px;
            background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
            border-radius: 8px;
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 24px;
            letter-spacing: 1px;
            text-align: center;
            font-style: normal;
            margin-top: 50px;
        }
    }
    .lianxi{
        width: 100%;
        // height: 414px;
        background: #3881F8;
        padding-bottom: 65px;
        .ts-title1{
            padding-top: 65px;
            margin-bottom: 50px;
            p{
                font-weight: 500;
                font-size: 32px;
                color: #FFFFFF;
            }
            span{
                width: 65px;
                height: 4px;
                background: #FFFFFF;
                border-radius: 3px;
                margin: 0 auto 20px auto;
                display: block;
            }
            b{
                font-weight: 400;
                font-size: 15px;
                color: #FFFFFF;
            }
        }
        .lianxi-box{
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            .lianxi-item{
                img{
                    width: 66px;
                    height: 66px;
                    margin-bottom: 20px;
                }
                p{
                    font-weight: 500;
                    font-size: 17px;
                    color: #FFFFFF;
                }
                span{
                    font-weight: 500;
                    font-size: 14px;
                    color: #FFFFFF;
                    display: block;
                }
            }
        }
    }
}
</style>